<form [formGroup]="form" (ngSubmit)="submit()" role="form" class="flex flex-col justify-start items-stretch">

  <div class="w-full md:mt-0 sm:max-w-md xl:p-0">
    <mat-tab-group mat-align-tabs="start" mat-stretch-tabs="false"  disableRipple>
      <mat-tab [label]="'Auth.Signin' | translate: {Default: 'Sign-in'}">
        <div class="flex flex-col justify-start items-stretch p-2 mt-2 gap-2">
          <ng-container *ngIf="showMessages.error && errors?.length && !loading">
            <mtx-alert *ngFor="let error of errors; let i = index" type="warning" dismissible (closed)="errors.splice(i, 1)">
              {{ 'Auth.' + error | translate: {Default: error} }}
            </mtx-alert>
          </ng-container>
          <div>
            <label for="email" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
              {{ 'AUTH.LOGIN.ACCOUNT' | translate: {Default: 'Account'} }}
            </label>
            <input matInput type="email" name="email" id="email" formControlName="userName" [placeholder]="'AUTH.LOGIN.USERNAME' | translate: {Default: 'Username / Email'} "
              class="ngm-input-element"
              required>
          </div>
          <div>
              <label for="password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
                {{ 'AUTH.LOGIN.PASSWORD' | translate: {Default: 'Password'} }}
              </label>
              <input matInput type="password" name="password" id="password" formControlName="password"
                placeholder="••••••••"
                class="ngm-input-element"
                required>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>

  <div class="pac-auth__login-remember flex justify-between items-center">
    <mat-checkbox formControlName="rememberMe">{{ 'AUTH.LOGIN.REMEMBER' | translate: {Default: 'Remember'} }}</mat-checkbox>
    <a class="forgot" routerLink="/auth/request-password">{{ 'AUTH.LOGIN.FORGOT-PASSWORD' | translate: {Default: 'Forgot Password'} }}</a>
  </div>

  <button class="ngm-button relative inline-flex items-center justify-center cursor-pointer p-0.5 mb-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group
    bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800
    disabled:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50
    "
    [disabled]="form.invalid || loading"
    [class.ngm-button-disabled]="form.invalid || loading">
    <span class="relative w-full px-5 py-2.5 transition-all ease-in duration-75 bg-white rounded-md
      group-hover:bg-opacity-0 group-disabled:bg-opacity-100
      dark:bg-gray-900">
      {{ 'AUTH.LOGIN.SUBMIT' | translate: {Default: 'Submit'} }}
    </span>
  </button>

  <div class="pac-auth__login-remember flex justify-end items-center">
    <a class="register" routerLink="/auth/register">{{ 'AUTH.LOGIN.SIGNUP' | translate: {Default: 'Signup'} }}</a>
  </div>

</form>

<div class="pac-login__signins flex flex-wrap justify-center items-center gap-2">
  @if (enableDingtalk()) {
    <button mat-icon-button (click)="open('dingtalk', 'window')" class="pac-login__signin-button"
      [matTooltip]="'AUTH.LOGIN.DINGTALK' | translate: {Default: 'Dingtalk'}">
      <img class="m-auto" src="/assets/images/destinations/dingtalk.svg">
    </button>
  }
  @if (enableFeishu()) {
    <button mat-icon-button (click)="open('feishu', 'window')" class="pac-login__signin-button"
      [matTooltip]="'AUTH.LOGIN.FEISHU' | translate: {Default: 'Feishu'}">
      <img class="m-auto" src="/assets/images/destinations/feishu.png">
    </button>
  }

  @if (enableGithub()) {
    <button mat-icon-button (click)="open('github', 'window')" class="pac-login__signin-button"
      [matTooltip]="'AUTH.LOGIN.GITHUB' | translate: {Default: 'Github'}">
      <img class="m-auto" src="/assets/images/destinations/GitHub-Mark-120px-plus.png">
    </button>
  }
</div>

<div *ngIf="loading" class="absolute top-1/2 left-1/2 -mt-4 -ml-4 z-10">
  <mat-spinner diameter="30" strokeWidth="2">
  </mat-spinner>
</div>
